<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>p2p网贷平台</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/common.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" type="text/css">
<link href="css/detail.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/common.js"></script>
  <script src="script/vue.js"></script>
  <script src="script/axios.min.js"></script>
  <script src="script/moment.js"></script>
  <!--引入 element-ui 的样式，-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 必须先引入vue，  后使用element-ui -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <!-- 引入element 的组件库-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<header>
  <div class="header-top min-width" id="ap1">
    <div class="container fn-clear"> <strong class="fn-left">咨询热线：400-668-6698<span class="s-time">服务时间：9:00 - 18:00</span></strong>
      <ul class="header_contact">
        <li class="c_1"> <a class="ico_head_weixin" id="wx"></a>
          <div class="ceng" id="weixin_xlgz" style="display: none;">
            <div class="cnr"> <img src="images/code.png"> </div>
            <b class="ar_up ar_top"></b> <b class="ar_up_in ar_top_in"></b> </div>
        </li>
        <li class="c_2"><a href="#" target="_blank" title="官方QQ" alt="官方QQ"><b class="ico_head_QQ"></b></a></li>
        <li class="c_4"><a href="#" target="_blank" title="新浪微博" alt="新浪微博"><b class="ico_head_sina"></b></a></li>
      </ul>
      <ul class="fn-right header-top-ul">
        <li> <a href="index.html" class="app">返回首页</a> </li>
        <li v-if="this.user==null">
          <div class=""><a href="register.html" class="c-orange" title="免费注册">免费注册</a></div>
        </li>
        <li v-if="this.user==null">
          <div class=""><a href="login.html" class="js-login" title="登录">登录</a></div>
        </li>
      </ul>
      <div v-if="this.user!=null" class=""><a>欢迎{{user.fullName}}登录   <a style="color: red" @click="outuser">[退出]</a></a></div>
    </div>
  </div>
  <div class="header min-width" id="ap2">
    <div class="container">
      <div class="fn-left logo"> <a class="" href="index.html"> <img src="images/logo.png"  title=""> </a> </div>
      <ul class="top-nav fn-clear">
        <li class="on"> <a href="index.html">首页</a> </li>
        <li> <a href="list.html" v-if="this.type==null||this.type==1">我要投资</a> </li>
        <li> <a href="borrow.html" v-if="this.type==null||this.type==0">我要借款</a> </li>
        <li> <a href="帮助中心.html">安全保障</a> </li>
        <li class="top-nav-safe" v-if="this.type!=null"> <a href="个人中心首页.html">我的账户</a> </li>
        <li> <a href="公司简介.html">关于我们</a> </li>
      </ul>
    </div>
  </div>
</header>
<!--列表-->
<div class="page-filter wrap" id="app">
  <div class="breadcrumbs"><a href="index.html">首页</a>&gt;<span class="cur">散标投资列表</span></div>
  <div class="invest-filter" data-target="sideMenu">
    <div class="filter-inner clearfix">
      <div class="filter-item">
        <div>
          <el-form :model="seltype">
            <el-form-item label="标名：">
              <el-input v-model="seltype.bidName" style="width: 300px"></el-input>
              <el-button type="primary" @click="search()" style="margin-left: 15px">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="bd">
          <dl>
            <dt>项目类型</dt>
            <dd>
              <ul>
                <el-radio-group v-model="seltype.bidType"  size="small">
                  <li class="n1" @change="sel"><el-radio-button label="">不限</el-radio-button></li>
                  <li class="n2" @change="sel"><el-radio-button label="0">车易贷</el-radio-button></li>
                  <li class="n3" @change="sel"><el-radio-button label="1">房易贷</el-radio-button></li>
                  <li class="n4" @change="sel"><el-radio-button label="2">赎楼贷</el-radio-button></li>
                  <li class="n5" @change="sel"><el-radio-button label="3">债权贷</el-radio-button></li>
                </el-radio-group>
              </ul>
            </dd>
          </dl>
         <dl>
            <dt>年利率</dt>
            <dd>
              <ul>
                <el-radio-group v-model="inter"  size="small">
                  <li class="n1" @change="sel"><el-radio-button label="7">不限</el-radio-button></li>
                  <li class="n2" @change="sel"><el-radio-button label="0">12%以下</el-radio-button></li>
                  <li class="n3" @change="sel"><el-radio-button label="1">12%-14%</el-radio-button></li>
                  <li class="n4" @change="sel"><el-radio-button label="2">14%-16%</el-radio-button></li>
                  <li class="n5" @change="sel"><el-radio-button label="3">16%以上</el-radio-button></li>
                </el-radio-group>
              </ul>
            </dd>
          </dl>
          <dl>
             <dt>期限</dt>
             <dd>
               <ul>
                 <el-radio-group v-model="trem"  size="small">
                   <li class="n1" @change="sel"><el-radio-button label="7">不限</el-radio-button></li>
                   <li class="n2" @change="sel"><el-radio-button label="0">1月一下</el-radio-button></li>
                   <li class="n3" @change="sel"><el-radio-button label="1">1-3月</el-radio-button></li>
                   <li class="n4" @change="sel"><el-radio-button label="2">3-6月</el-radio-button></li>
                   <li class="n5" @change="sel"><el-radio-button label="3">6-12月</el-radio-button></li>
                 </el-radio-group>
               </ul>
             </dd>
           </dl>
          <dl class="repayment">
             <dt>还款方式</dt>
             <dd>
               <ul>
                 <el-radio-group v-model="seltype.repayType"  size="small">
                   <li class="n1" @change="sel"><el-radio-button label="">不限</el-radio-button></li>
                   <li class="n2" @change="sel"><el-radio-button label="0">一次性还款</el-radio-button></li>
                   <li class="n4" @change="sel"><el-radio-button label="1">等额本金</el-radio-button></li>
                   <li class="n4" @change="sel"><el-radio-button label="2">等额本息</el-radio-button></li>
                 </el-radio-group>
               </ul>
             </dd>
           </dl>
        </div>
      </div>
      <div class="common-problem">
        <h3>常见问题</h3>
        <ul>
          <li><a href="#">什么是债权贷？</a></li>
          <li><a href="#">关于"债权贷"产品的说明</a></li>
          <li><a href="#">易贷网P2P理财收费标准</a></li>
          <li><a href="#">债权贷和房易贷、车易贷有什么区别？</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="invest-list mrt30 clearfix">
    <div class="hd">
      <h3>投资列表</h3>
    </div>
    <div class="bd">
      <div class="invest-table clearfix">
        <div class="title clearfix">
          <ul>
            <li class="col-330">借款标题</li>
            <li class="col-180"><a href="javascript:url('order','account_up');" class="">借款金额</a> </li>
            <li class="col-110"><a href="javascript:url('order','apr_up');" class="">年利率</a> </li>
            <li class="col-150"><a href="javascript:url('order','period_up');" class="">借款期限</a> </li>
            <li class="col-150">还款方式</li>
            <li class="col-120"><a href="javascript:url('order','scale_up');" class="">借款进度</a></li>
            <li class="col-120-t">操作</li>
          </ul>
        </div>
        <!------------投资列表-------------->
        <div class="item" v-for="item in biaolist">
          <ul>
            <li class="col-330"><a v-html="item.bidName" :title="item.bidName"></a></li>
            <li class="col-180"><span class="f20 c-333">{{item.totalAmount}}</span>元</li>
            <li class="col-110 relative"><span class="f20 c-orange">{{item.interest.toFixed(2)}}% </span></li>
            <li class="col-150"> <span class="f20 c-333">{{item.trem}}</span>{{item.tremType==0?'天':'个月'}}</li>
            <li class="col-150">{{item.repayType|typeFit}}</li>
            <li class="col-120">
              <div class="circle">
                <div class="left progress-bar">
                  <div class="progress-bgPic progress-bfb10">
                    <div class="show-bar"> {{((item.raiseAmount/item.totalAmount)*100).toFixed(0)}}% </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="col-120-2"> <a class="ui-btn btn-gray" @click="to(item.id)">{{(item.raiseAmount/item.totalAmount)==1?'还款中':'投资'}}</a> </li>
          </ul>
        </div>
        <!------------投资列表-------------->
      </div>
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.pagenum"
              :page-sizes="[1, 2, 3, 20]"
              :page-size="page.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
      {{seltype}}
  </div>
</div>
<!--网站底部-->
<div id="footer" class="ft">
  <div class="ft-inner clearfix">
    <div class="ft-helper clearfix">
      <dl>
        <dt>关于我们</dt>
        <dd><a href="公司简介.html">公司简介</a><a href="管理团队.html">管理团队</a><a href="网站公告.html">网站公告</a></dd>
      </dl>
      <dl>
        <dt>相关业务</dt>
        <dd><a href="list.html">我要投资</a><a href="我要借款.html">我要借款</a></dd>
      </dl>
      <dl>
        <dt>帮助中心</dt>
        <dd><a href="帮助中心.html">新手入门</a><a href="个人中心首页.html">我的账户</a><a href="list.html">债权转让</a></dd>
      </dl>
      <dl>
        <dt>联系我们</dt>
        <dd><a href="联系我们.html">联系我们</a></dd>
      </dl>
    </div>
    <div class="ft-service">
      <dl>
        <dd>
          <p><strong>400-660-1268</strong><br>
            工作日 9:00-22:00<br>
            官方交流群:<em>12345678</em><br>
            工作日 9:00-22:00 / 周六 9:00-18:00<br>
          </p>
          <div class="ft-serv-handle clearfix"><a class="icon-hdSprite icon-ft-sina a-move a-moveHover" title="亿人宝新浪微博" target="_blank" href="#"></a><a class="icon-hdSprite icon-ft-qqweibo a-move a-moveHover" title="亿人宝腾讯微博" target="_blank" href="#"></a><a class="icon-ft-qun a-move a-moveHover" title="亿人宝QQ群" target="_blank" href="#"></a><a class="icon-hdSprite icon-ft-email a-move a-moveHover mrn" title="阳光易贷email" target="_blank" href="mailto:xz@yirenbao.com"></a></div>
        </dd>
      </dl>
    </div>
    <div class="ft-wap clearfix">
      <dl>
        <dt>官方二维码</dt>
        <dd><span class="icon-ft-erweima"><img src="images/code.png" style="display: inline;"></span></dd>
      </dl>
    </div>
  </div>
  <div class="ft-record">
    <div class="ft-approve clearfix"><a class="icon-approve approve-0 fadeIn-2s" target="_blank" href="#"></a><a class="icon-approve approve-1 fadeIn-2s" target="_blank" href="#"></a><a class="icon-approve approve-2 fadeIn-2s" target="_blank" href="#"></a><a class="icon-approve approve-3 fadeIn-2s" target="_blank" href="#"></a></div>
    <div class="ft-identity">©2015 亿人宝 All rights reserved&nbsp;&nbsp;&nbsp;<span class="color-e6">|</span>&nbsp;&nbsp;&nbsp;安徽省亿人宝投资管理有限公司&nbsp;&nbsp;&nbsp;<span class="color-e6">|</span>&nbsp;&nbsp;&nbsp;<a target="_blank" href="http://www.miitbeian.gov.cn/">皖ICP备12345678号-1</a></div>
  </div>
</div>
</div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      page:{
        pagenum:0,
        pagesize:1
      },
      template:{},
      inter:7,
      trem:7,
      seltype:{bidType:'',repayType:'',tremqian:'',tremhou:'',interqian:'',interhou:''},
      total:null,
      biaolist:[]
    },
    methods:{
      sel:function(){
        if(this.inter==7){
          this.seltype.interqian='';
          this.seltype.interhou='';
        }
        if(this.inter==0){
          this.seltype.interqian=0;
          this.seltype.interhou=12;
        }
        if(this.inter==1){
          this.seltype.interqian=12;
          this.seltype.interhou=14;
        }
        if(this.inter==2){
          this.seltype.interqian=14;
          this.seltype.interhou=16;
        }
        if(this.inter==3){
          this.seltype.interqian=16;
        }
        if(this.trem==7){
          this.seltype.tremType='';
          this.seltype.tremqian='';
          this.seltype.tremhou='';
        }
        if(this.trem==0){
          this.seltype.tremType=0;
          this.seltype.tremqian=0;
          this.seltype.tremhou=30;
        }
        if(this.trem==1){
          this.seltype.tremType=1;
          this.seltype.tremqian=1;
          this.seltype.tremhou=3;
        }
        if(this.trem==2){
          this.seltype.tremType=1;
          this.seltype.tremqian=3;
          this.seltype.tremhou=6;
        }
        if(this.trem==3){
          this.seltype.tremType=1;
          this.seltype.tremqian=6;
          this.seltype.tremhou=12;
        }
        this.search();
      },
      to:function(id){
        window.open("a/"+id+".html");
      },
      search:function(){
        axios.post("/api/finance-service-es/educourse/findall/"+this.page.pagenum+"/"+this.page.pagesize,this.seltype).then(
                (res)=>{
                  if(res.data.success){
                    if(res.data.result!=null){
                      this.biaolist=res.data.result.content;
                      this.total=res.data.result.totalElements;
                    }
                    if(res.data.result==null){
                      this.biaolist=[];
                      this.total=0;
                    }
                  }else{
                    this.$message.error(res.data.message);
                  }
                }
        );
      },
      handleSizeChange:function (val) {
        this.page.pagesize=val;
        this.search();
      },
      handleCurrentChange:function (val) {
        this.page.pagenum=val;
        this.search();
      },
    },
    filters:{
      typeFit:function (val) {
        if(val==0){
          return '一次性还款'
        }
        if(val==1){
          return '等额本金'
        }
        if(val==2){
          return '等额本息'
        }
      }
    },
    mounted(){
      this.search();
    }
  });
  new Vue({
    el:"#ap1",
    data:{
      user:{fullName:''},
    },
    methods:{
      outuser:function () {
        sessionStorage.removeItem("cususer");
        sessionStorage.removeItem("type");
        window.location.reload();
      }
    },
    mounted(){
      this.user=JSON.parse(sessionStorage.getItem("cususer"));
    }
  });
  new Vue({
    el:"#ap2",
    data:{
      type:'',
    },
    methods:{

    },
    mounted(){
      this.type=sessionStorage.getItem("type");
    }
  });
</script>
</html>
